<template>
  <div class="box">
    <div class="box3">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        default-active="2"
        text-color="#fff"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @select="handleClose"
        style="height: 100vh"
      >
        <template v-for="v in data" :key="v.path">
          <el-sub-menu :index="v.meta.tiete" v-if="v.children">
            <template #title>
              <el-icon><List /></el-icon>
              <span>{{ v.meta.tiete }}</span>
            </template>
            <el-menu-item-group
              v-for="(itm, indx) in v.children"
              :key="'children' + indx"
            >
              <el-menu-item :index="itm.meta.tiete">{{
                itm.meta.tiete
              }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item :index="v.meta.tiete" v-else>
            <el-icon><component :is="v.meta.color"></component></el-icon>
            <template #title>{{ v.meta.tiete }}</template>
          </el-menu-item>
        </template>
        <!-- <el-menu-item index="数据展示">
          <el-icon><TrendCharts /></el-icon>
          <template #title>数据展示</template>
        </el-menu-item> -->
        <!-- <el-icon><TrendCharts /></el-icon> -->
        <!-- <el-menu-item index="数据展示">
          <el-icon><TrendCharts /></el-icon>
          <template #title>数据展示</template>
        </el-menu-item>
        <el-menu-item index="缴费管理">
          <el-icon><Grid /></el-icon>
          <template #title>缴费管理</template>
        </el-menu-item>
        <el-sub-menu index="住户信息">
          <template #title>
            <el-icon><List /></el-icon>
            <span>住户信息</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="住户信息列表">住户信息列表</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="住户信息修改">住户信息修改</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu> -->
      </el-menu>
    </div>
    <el-container>
      <el-header class="fex">
        <el-icon @click="sw1" v-show="isCollapse" size="0.3125rem"
          ><CaretRight
        /></el-icon>
        <el-icon @click="sw2" v-show="!isCollapse" size="0.3125rem"
          ><CaretLeft
        /></el-icon>
      </el-header>
      <el-main class="el-main"
        ><div class="box4"><router-view></router-view></div
      ></el-main>
    </el-container>
    <PopupModify class="popup" v-show="store.state.flag"></PopupModify>
    <GuanLi class="popup" v-show="store.state.rights"></GuanLi>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { ref } from "vue";
import { useRouter } from "vue-router";
import PopupModify from "../components/PopupModify.vue";
import GuanLi from "../components/GuanLi.vue";
const store = useStore();
const isCollapse = ref(false);
const router = useRouter();
const data = ref([
  {
    meta: { tiete: "", color: "" },
    path: "",
    children: [
      {
        meta: { tiete: "", color: "" },
        path: "",
        children: [{}],
      },
    ],
  },
]);
data.value = router.options.routes[2].children as any;
console.log(data.value, "2222");
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key);
  if (key == "住户信息列表") {
    router.push("/page/mation/tenant");
  }
  if (key == "住户信息修改") {
    router.push("/page/mation/changes");
  }
  if (key == "数据展示") {
    router.push("/page/chart");
  }
  if (key == "缴费管理") {
    router.push("/page/cost");
  }
  if (key == "权限管理") {
    router.push("/page/rights");
  }
};
function sw1() {
  isCollapse.value = false;
}
function sw2() {
  isCollapse.value = true;
}
</script>

<style scoped lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.box {
  width: 100vw;
  height: 100vh;
  display: flex;
}
.fex {
  display: flex;
  align-items: center;
}
.el-main {
  width: 100%;
  height: 100%;
  --el-main-padding: 0.25rem;
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: var(--el-main-padding);
  background-color: gainsboro;
}

nav {
  width: 100%;
  height: 0.875rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 0.25rem;
}
.popup {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-color: rgba($color: #606266, $alpha: 0.3);
  z-index: 1000000000000000;
}
.box4 {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>
